<template>
  <div class="wallpaper-setting">
    <div class="current-wallpaper">
      <img :src="currentWallpaper" alt="" />
    </div>
    <div class="wallpaper-list">
      <img
        v-for="item in wallpapers"
        :key="item"
        @click="changeWallpaper(item)"
        :src="item"
        alt=""
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useThemeStore } from "../../../stores/theme"
import VariableName from "../../../stores/theme/variable-name"
import { computed } from "vue"

const wallpapers = Object.keys(import.meta.glob("@/assets/wallpaper/*"))

const themeStore = useThemeStore()

function changeWallpaper(name: string) {
  name = name.replace("/src/assets/wallpaper/", "")
  themeStore.setVariable(VariableName.Wallpaper.src, name)
}

const src = themeStore.getVariableRef(VariableName.Wallpaper.src)
const currentWallpaper = computed(
  () => new URL(`../../../assets/wallpaper/${src.value}`, import.meta.url).href
)
</script>

<style scoped lang="scss">
.wallpaper-setting {
  max-height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;

  .current-wallpaper {
    width: 1.5rem;
    height: 1rem;
    background: linear-gradient(135deg, #bdc3c7, #cdc3c7);
    border-radius: 5px;
    margin: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 4px 4px 5px 0 rgba(100, 100, 135, 0.37);
    border: 0.5px solid rgba(150, 150, 150, 0.5);

    img {
      width: 1.4rem;
      height: 0.92rem;
      border-radius: 4px;
      object-fit: cover;
      border: 0.5px solid rgba(100, 100, 100, 0.6);
      box-shadow: 0 0 1px 10px rgba(100, 100, 100, 0.8) inset;
    }
  }

  .wallpaper-list {
    height: calc(100% - 1.4rem);
    overflow-y: auto;
    border-top: 1px solid rgba(150, 150, 150, 0.5);
    padding: 0.1rem 0.1rem;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-row-gap: 0.1rem;
    justify-items: center;

    img {
      border: 0.5px solid rgba(100,100,100,0.3);
      width: 1.05rem;
      height: 0.7rem;
      border-radius: 5px;
      object-fit: cover;
    }
  }
}
</style>
